<template>
  <div class="asset">
    <div class="asset-head">
      <div class="label">搜索:</div>
      <SInput icon="icon-search" value=""></SInput>
    </div>
    <STree :data="data"
           @context="onItemContext"
           :can-drag="canDrag"
           :drag-start="dragStart"
    ></STree>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue';
import { showMenuByMouseEvent } from '@/ui-kit/menu';
import STree from '@/ui-kit/tree/tree.vue';
import { TreeData } from '@/ui-kit/tree';
import assetsStore, { IAssetStore } from '../store/assets';
import { AssetType, IAssetInfo } from '../store/types';
import {
  buildEventItemMenu,
  buildEventMenu,
  buildObjectItemMenu,
  buildObjectMenu,
  buildSceneItemMenu,
  buildSceneRootMenu,
} from './right-menu';
import SInput from '@/ui-kit/input/input.vue';
import { DragCreateObjectData, DragType } from './dragHelper';
import { Emitter } from '@/ui-kit/index';
import { Msg } from '../msg';

export default defineComponent({
  name: 's-asset',
  components: { SInput, STree },
  setup(props, ctx) {
    const data = computed(() => {
      const ret: TreeData[] = [];

      const scene = new TreeData({
        name: '场景',
        ctxMenu: (event: MouseEvent) => {
          showMenuByMouseEvent(event, buildSceneRootMenu());
        },
      });
      ret.push(scene);
      const event = new TreeData({
        name: '事件',
        ctxMenu: (event: MouseEvent) => {
          showMenuByMouseEvent(event, buildEventMenu());
        },
      });
      ret.push(event);
      const obj = new TreeData({
        name: '对象',
        ctxMenu: (event: MouseEvent) => {
          showMenuByMouseEvent(event, buildObjectMenu());
        },
      });
      obj.icon = '';
      ret.push(obj);
      const store: IAssetStore = assetsStore();
      const list = store.assets;
      list.forEach((assetInfo: IAssetInfo) => {
        const item = new TreeData({ name: assetInfo.name, id: assetInfo.id });
        item.data = assetInfo;
        switch (assetInfo.type) {
          case AssetType.Object:
            item.contextmenu = (event => {
              showMenuByMouseEvent(event, buildObjectItemMenu(assetInfo));
            });
            item.change = (event: any, val: TreeData) => {
              return assetsStore().renameAsset(assetInfo.id, val.name);
            };
            item.icon = assetInfo.icon || '';
            obj.children.push(item);
            break;
          case AssetType.Event:
            item.contextmenu = (event: MouseEvent): void => {
              showMenuByMouseEvent(event, buildEventItemMenu(assetInfo));
            };
            item.dblclick = (event: MouseEvent, data: TreeData): void => {
              Emitter.emit(Msg.OpenAsset, assetInfo);
            };
            item.change = (event: any, val: TreeData) => {
              return assetsStore().renameAsset(assetInfo.id, val.name);
            };
            item.icon = 'icon-sheet';
            event.children.push(item);
            break;
          case AssetType.Scene:
            item.icon = 'icon-scene';
            item.dblclick = (event: MouseEvent): void => {
              Emitter.emit(Msg.OpenAsset, assetInfo);
            };
            item.click = () => {
              Emitter.emit(Msg.ShowAssetProperty, assetInfo);
            };
            item.contextmenu = (event: MouseEvent): void => {
              showMenuByMouseEvent(event, buildSceneItemMenu(assetInfo));
            };
            item.change = (event: any, val: TreeData) => {
              return assetsStore().renameAsset(assetInfo.id, val.name);
            };
            scene.children.push(item);
            break;
        }
      });
      return ret;
    });


    return {
      data,
      onItemContext(event: MouseEvent, data: TreeData) {
      },

      dragStart(event: DragEvent, data: IAssetInfo) {
        if (data.type === AssetType.Object) {
          const dragData: DragCreateObjectData = { id: data.id };
          event.dataTransfer?.setData(DragType.CreateObject, JSON.stringify(dragData));
        }
      },
      canDrag(data: any) {
        if (data) {
          const info = data as IAssetInfo;
          if (info.type === AssetType.Object) {
            return true;
          }
        }
        return false;
      },
    };
  },
});
</script>

<style scoped lang="scss">
.asset {
  width: 100%;

  .asset-head {
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    .label {
      width: 25px;
      white-space: nowrap;
    }
  }
}
</style>